<script lang="ts" setup>
import type { OpenCallbackMeta as IconSelectModalOpenCallbackMeta } from '@/components/IconSelectModal/type'
import type { Advantage01ComponentMeta } from '@/definitions/type'
import { type Advantage01Item, ENavigation01IconType } from '@/api/designer/model'
import AddButton from '@/components/AddButton/AddButton.vue'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import ContainerMask from '@/components/CompAttr/ContainerMask.vue'
import { useCompRefs } from '@/hooks/useCompRefs'
import { useCompStyle } from '@/hooks/useCompStyle'
import { useInstStore } from '@/stores'
import { removeItem, sortItem } from '@/utils/helper'
import { buildShortUUID } from '@/utils/uuid'
import { Input, RadioButton, RadioGroup, Textarea } from 'ant-design-vue'
import { ref } from 'vue'

defineOptions({
  name: 'Advantage01Attr',
  inheritAttrs: true,
})

const instStore = useInstStore()
const { activeRender } = useCompStyle<Advantage01ComponentMeta>()
const MAX_ITEMS = 8
function createItem(): Advantage01Item {
  return {
    id: buildShortUUID(),
    title: '',
    titleRules: {
      min: 2,
      max: 16,
      required: true,
    },
    icon: '',
    iconRules: {
      min: 2,
      required: true,
    },
    description: '',
    descriptionRules: {
      min: 2,
      required: true,
    },
    iconUseThemeColor: true,
  }
}
function handleAddItem() {
  if (!activeRender.value)
    return
  if (activeRender.value.config.items!.length >= MAX_ITEMS)
    return
  handleChooseIcon(createItem())
}
function handleRemoveItem(item: Advantage01Item) {
  if (!activeRender.value)
    return
  removeItem(activeRender.value.config.items!, l => l.id === item.id)
}
function handleSort(item: Advantage01Item, type: 'up' | 'down') {
  sortItem(activeRender.value!.config.items!, l => l.id === item.id, type)
}
const { IconSelectModalRef } = useCompRefs()
const currentJumpItem = ref<Nullable<Advantage01Item>>()
function handleChooseIcon(item: Advantage01Item) {
  if (IconSelectModalRef.value && activeRender.value) {
    currentJumpItem.value = item
    IconSelectModalRef.value.open({
      icon: {
        icon: item.icon,
        iconColor: item.iconColor,
        id: item.id,
        iconUseThemeColor: item.iconUseThemeColor,
      },
      iconType: ENavigation01IconType.矢量图标,
    }, chooseIconCallback)
  }
}
function chooseIconCallback(meta: IconSelectModalOpenCallbackMeta) {
  if (activeRender.value && currentJumpItem.value && meta.applied) {
    const index = activeRender.value.config.items!.findIndex(l => l.id === currentJumpItem.value!.id)
    if (~index) {
      activeRender.value.config.items![index] = {
        ...activeRender.value.config.items![index],
        ...meta.value.icon,
      }
    }
    else {
      activeRender.value.config.items!.push({
        ...currentJumpItem.value,
        ...meta.value.icon,
      })
    }
  }
  currentJumpItem.value = null
}
</script>

<template>
  <div v-if="activeRender">
    <div class="setting-block">
      <div class="title-label">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="setting-block">
      <div class="title-label">
        组件内容
      </div>
      <!-- 列表 -->
      <div class="flex flex-col w-full gap-3 mt-3">
        <!-- item for loop -->
        <div v-for="(item, index) in activeRender.config.items" :key="item.id" class="relative w-full pr-8">
          <!-- 灰色块 -->
          <div class="box-border w-full rounded bg-[#FAFAFF] p-14px">
            <div class="flex flex-row items-start gap-2">
              <div class="text-sm text-second-render flex-none">
                图标
              </div>
              <div class="block-left" :class="item.icon ? 'has-icon' : ''" @click="handleChooseIcon(item)">
                <img
                  v-if="!item.icon" src="/images/upload-placeholder.png" :width="32" :height="32"
                  class="block w-32px h-32px mx-auto mt-4"
                >
                <div
                  v-else class="text-48px !leading-none w-full h-full flex justify-center items-center iconfont"
                  :class="item.icon"
                  :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
                />
                <ContainerMask class="block-left-mask" />
              </div>
            </div>
            <div class="flex flex-row items-center gap-2 mt-10px">
              <div class="text-sm text-second-render flex-none">
                标题
              </div>
              <Input
                v-model:value="item.title" placeholder="请输入标题" class="flex-1" :minlength="item.titleRules?.min"
                :max-length="item.titleRules?.max" :required="item.titleRules?.required"
              />
            </div>
            <div class="flex flex-row items-start gap-2 mt-10px">
              <div class="text-sm text-second-render flex-none">
                描述
              </div>
              <Textarea
                v-model:value="item.description" :rows="4" placeholder="请输入描述内容" class="flex-1"
                :minlength="item.descriptionRules?.min" :max-length="item.descriptionRules?.max"
                :required="item.descriptionRules?.required"
              />
            </div>
          </div>
          <!-- 灰色块操作 -->
          <BlockOpts
            :item="item" :disabled-up="index === 0"
            :disabled-down="index === activeRender.config.items!.length - 1" @remove="handleRemoveItem"
            @sort="handleSort"
          />
        </div>
      </div>
      <!-- 添加按钮 -->
      <AddButton v-if="(activeRender.config.items?.length || 0) < MAX_ITEMS" @click="handleAddItem">
        添加内容
      </AddButton>
    </div>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.setting-block {
  @apply mb-6;
}

.title-label {
  color: var(--app-text-color-main);
  margin-bottom: 14px;
  @apply text-sm font-700;
}

.block-left {
  width: 64px;
  height: 64px;
  border: 1px solid #EEE;
  @apply rounded overflow-hidden relative bg-white;

  &.has-icon:hover .block-left-mask {
    @apply opacity-100;
  }
}
</style>
